<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8">
    <title>用户</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="images/title.ico">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/footer.css">
    <link rel="stylesheet" href="css/user.css">
</head>
<style>


body {
  font-family: Arial,sans-serif;
   margin: 0;
   padding: 0;
   display: flex;
   height: 100vh;
}
form {  
  width: 300px;  
  margin-top: 200px;  
  border-radius: 8px;  
  box-shadow: 0 0 10px rgba(0,0,0,0.1);  
  background-color: #fff;  
  padding: 20px;  
}  
  
 
input[type="text"],  
input[type="password"] {  
  width: 100%;  
  padding: 10px;  
  margin-bottom: 16px;  
  box-sizing: border-box;  
  border: 1px solid #ccc;  
  border-radius: 4px;  
  transition: border-color 0.3s;  
}  
  
input[type="text"]:focus,  
input[type="password"]:focus {  
  border-color: #3498db;  
}  
  

button {  
  width: 100%;  
  padding: 12px;  
  background-color: #3498db;  
  color: #fff;  
  border: none;  
  border-radius: 4px;  
  cursor: pointer;  
  transition: background-color 0.3s;  
}  
  
button:hover {  
  background-color: #017E5C; 
}  

span.error {  
  color: red;  
  display: block;  
  background-color: #ffe5e5;  
  border: 1px solid #f00;  
  padding: 8px;  
  border-radius: 4px;  
  margin-top: 8px;  
}

.container {
  display: flex;
  width: 100%;
  height: 100%;
}

  .left-side, .right-side {
   flex: 1;
   display: flex;
   align-items: flex-start;
   justify-content: center;
   
}

   .left-side {
  background-color: #017E5C;
  }
     .right-side {
  background-color: #017E5C;
  }
  .side1{
  background-color: #017E5C;
   flex: 1;
   display: flex;
   align-items: flex-start;
   height:80px;
  }
     form {
  width: 300px;
  margin-top: 200px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  background-color: #fff;
  }
  
     label {
  display: block:
  margin-bottom: 8px;
  }
  
    input {
  width: 100%
  padding: 8px;
  margin-bottom: 16px;
  box-sizing: border-box;
  }
  
     button {
  width: 100%;
  padding:10px;
  background-color:#017E5C;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  
  }
  span {
  color: red;
  line-height: 2em;
  }
.nav-footer {  
    position: fixed;  
    bottom: 100px;  
    left: 10px; 
    display: flex;  
    flex-direction: column;   
    align-items: flex-end; 
    background-color: #809d87;   
    padding: 10px; 
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);  
}  
  
.nav-list {  
    list-style-type: none;  
    margin: 0;  
    padding: 0;  
    display: flex;  
    flex-direction: column;  
}  
  
.nav-item {  
    margin-bottom: 5px;  
}  
  
.nav-item a {  
    display: flex;  
    align-items: center;   
    color: #fff; 
    text-decoration: none;
    font-size: 14px; 
}  
   
  
    .side {  
        position: absolute;  
        bottom: 100px; 
        left: 170px; 
        width: 200px;
        height: 400px; 
      
        padding: 10px;
    }  
  
   
</style>
<body>

<!--登录开始-->
<div class="login">

<div class="container">

<div class="left-side">

<form action="User" method="post">
<div class="message">
    <i class="iconfont"></i>
    <span>先选餐馆和座位再登陆哟~</span>
</div>
<h2>用户登录</h2>
<label for="user_account">账号:</label><br>
<input type="text" id="user_account" name="user_account" required><br>

<label for="user_pwd">密码:</label><br>
<input type="password" id="user_pwd" name="user_pwd" required><br>

<input type="hidden" name="btn" value="login"/>
<%if("3".equals(request.getParameter("ret"))){
	out.println("<span>账号名或密码错误</span>");

	}%>

<button type="submit">登录</button>
</form>
</div>
<div class="right-side">
<form action="User" method="post">
<h2>用户注册</h2>
<label for="user_account">账号:</label><br>
<input type="text" id="user_account" name="user_account" required><br>

<label for="user_name">姓名:</label><br>
<input type="text" id="user_name" name="user_name" required><br>

<label for="user_pwd">密码:</label><br>
<input type="password" id="user_pwd" name="user_pwd" required placeholder="密码包含大小写,不小于8个字符"><br>

<label for="user_phone">联系电话:</label><br>
<input type="text" id="user_phone" name="user_phone" required><br>

<label for="user_email">Email:</label><br>
<input type="email" id="user_email" name="user_email" required><br>

<%if("1".equals(request.getParameter("ret"))){
	out.println("<span>注册成功</span>");
}else if("0".equals(request.getParameter("ret"))){
	out.println("<span>注册失败</span>");
	}%>


<button type="submit">注册</button>


</form>



</div>

</div>
</div>
<div class="side">  
    <form action="select_table" method="post">  
        <h2>自主选餐馆与座位~</h2>  
        <label for="restaurant_id">餐馆号:</label><br>  
        <input type="text" id="restaurant_id" name="restaurant_id" required><br>  
        <label for="select_table">座位号:</label><br>  
        <input type="text" id="select_table" name="select_table" required><br>  
        <button type="submit">选定餐馆与座位</button>  
    </form>  
</div>  
<!-- 页脚开始 -->
<div class="nav-footer">  
    <ul class="nav-list">  
        <li class="nav-item"><a href="cheflogin.jsp">后厨登录</a></li>  
        <li class="nav-item"><a href="adminlogin.jsp">前台登录</a></li>  
    </ul>  
</div>

<!--登录结束-->

<!--页脚开始-->
<div class="footer">
   <div>
        <a href="index.jsp">
            <i class="iconfont"></i>
            <p>首页</p>
        </a>
    </div>    
    <div>
        <a href="user.jsp">
            <i class="iconfont"></i>
            <p>用户登陆注册</p>
        </a>
    </div>

</div>
<!--页脚结束-->
</body>
</html>